<%--
  Created by IntelliJ IDEA.
  User: 施明
  Date: 2019/5/21
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${path}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layuiadmin/style/admin.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
<div class="layui-form-item">

    <div class="layui-inline">

        <!-- 搜索框 -->
        <div class="demoTable">
            姓名：
            <div class="layui-inline">
                <input class="layui-input" name="username" id="demoReload"
                       autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>
</div>


<table class="layui-hide" id="test" lay-filter="test"></table>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="查看">地址</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="ban">禁|启</a>
</script>

<script src="${path}/layuiadmin/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            //  ,url:'/test/table/demo1.json'
            ,
            url: 'listUser' //模拟接口
            ,
            toolbar: '#toolbarDemo',
            title: '用户数据表',
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'userid', width: 90, title: '员工ID', sort: true}
                    , {field: 'username', width: 100, title: '姓名', sort: true}
                    , {field: 'usersex', width: 100, title: '用户性别', sort: true}
                    , {field: 'userphone', width: 150, title: '用户电话', sort: true}
                    , {field: 'userregisday', width: 150, title: '注册时间', sort: true}
                    , {field: 'userbirthday', width: 150, title: '生日时间', minWidth: 100}
                    , {
                    field: 'userstatus', width: 150, title: '状态', templet: function (res) {
                        return res.userstatus == 0 ? "普通" : "黑名单";
                    }
                }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]
            ],
            page: true,
            id: 'testReload'
        });


        //表格数据重载，模糊查询
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    },
                    where: {
                        //这里传值给servlet
                        content: demoReload.val()
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            console.log(data.userid);
            if (obj.event === 'ban') {
                layer.confirm('真的禁(启)用么', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: "banUser?userid=" + data.userid,
                        dataType: 'json',
                        success: function (data) {
                            console.log(data.msg);
                            if (data.msg == "操作成功")
                                layer.msg('已禁(启)用!', {icon: 1, time: 2000});
                            window.location.reload();
                        },
                        error: function (data) {
                            console.log(data.msg);
                        },
                    });
                });
            }else if(obj.event==='edit'){
          console.log(data.userid);
                    layer.open({
                        type : 2,
                        area : ['700px', '450px'],
                        maxmin : true,
                        content : "showAddress?userid=" + data.userid
                    });
                }





        });
    });
</script>

</body>

</html>
